<template>
    <div>
        <el-dialog title="学生信息" style="background: #F0F0F0;" :visible.sync="value" :show-close="false" center width="80%">
            <el-form :model="student">
                <el-form-item prop="nickName" label="学生姓名">
                    <el-input v-model="student.nickName" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item prop="classesId" label="所在班级">
                    <el-select v-model="student.classesId">
                        <el-option :key="classes.id" :value="classes.id" :label="classes.classesName" v-for="classes in classesList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="roleIds" label="分配角色">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox :key="item.id" :label="item.id" v-for="item in roleList">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>

            <template slot="footer">
                <el-button type="success" icon="el-icon-plus" @click="handleSubmit">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>

    import { getClassesList } from "@/api/quality/classes";

    import { saveStudent } from "@/api/quality/student";

    import { getRoles } from '@/api/access/role'

    export default {
        name: "student-child",
        data(){
            return {
                value : false,
                student:{},
                classesList:[],
                roleList:[],
                checkList:[]
            }
        },
        watch:{
            value(data){
                if(data){

                    this.checkList = [];

                    getClassesList({page:1,size:1000}).then(res=>{
                        this.classesList = res.data.data.rows;
                    });

                    getRoles().then(res=>{
                        this.roleList = res.data.data;
                    });
                }
            }
        },
        methods:{
            handleSubmit(){

                this.student.roleIds = this.checkList.join(",");

                saveStudent(this.student).then(res=>{
                    this.$message({
                        type:res.data.success ? 'success' : 'error',
                        message: res.data.message
                    });
                    this.value = false;
                    this.$parent.getStudentList({});
                })
            }
        }
    }
</script>

<style scoped>

</style>